<template>
  <div class="video" style="text-align: center">
    <div>
      <el-button size="mini" style="margin: 20px;" class="back" type="primary" @click="back">返回</el-button>
    </div>
    <div class="content">
      <div class="mask" v-if="mask"></div>
      <video
        id="my-player"
        class="video-js"
        controls
        preload="auto"
        poster="//vjs.zencdn.net/v/oceans.png"
        data-setup='{}'>
        <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
        <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
        <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
      </video>
<!--      <a class="hj-btn">呼叫老师</a>-->
    </div>
  </div>
</template>
<script>
  import videojs from 'video.js';
  export default {
    data() {
      return {
        mask: false, //控制蒙层
         src: 'https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4'
      }
    },
    mounted() {
       if(this.src.indexOf('m3u8') !== -1) {
         this.mask = true;
       }
      var player = videojs('my-player', {
        autoplay: true,
        inactivityTimeout: false,
        controlBar: {
          children: [
            {name: 'playToggle'}, // 播放/暂停按钮
            {name: 'progressControl'}, // 播放进度条
          ]
        }
      });
       let e = document.createElement('a');
       e.className = 'hj-btn';
       e.innerText = '呼叫老师';
      document.querySelector('.vjs-control-bar').append(e);
    },
    methods: {
      back() {
        this.$confirm('此操作将返回上一页, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({path: '/'});
        }).catch(() => {
        });
      }
    }
  }
</script>
<style lang="css">
  .back{
    margin: 20px;
  }
  .content{
    /*background: #000;*/
    position: relative;
    /*width: 580px;*/
    /*margin: 0 auto;*/
  }
  .content .mask{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: #fff;
    opacity: .1;
  }
  .content .video-js{
    /*width: 1000px;*/
    margin: 0 auto;
  }
  .content .hj-btn{
    cursor: pointer;
    display: inline-block;
    border: 1px solid #ccc;
    font-size: 12px;
    padding: 0px 10px;
    border-radius: 30px;
    position: relative;
    top: 5px;
    height: 20px;
    line-height: 18px;
    margin-right: 10px;
  }
</style>
